<!--
 * @Author: wangding
 * @Date: 2021-03-04 11:41:42
 * @LastEditTime: 2021-03-05 10:47:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solax-cloud-system\src\components\common\baseNumberSlow.vue
   用法： <baseNumberSlow :num='num ||0' :length='8'></baseNumberSlow>
   ***注释：num为传进来的数据值，length为位数
-->
<template>
    <div class="baseNumberSlow-main-box">
        <p class="box-item" v-for='(item,index) in numArr' :key='index'><span ref="numberItem">0123456789</span></p>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {
        num:{
            type:Number,
            default:0
        },
        length:{
            type:Number,
            default:6
        },
    },
    data() {
        return {
            numArr:[0,0,0,0,0,0],
        };
    },
    computed: {

    },
    watch: {
        num:{
            handler(nv,ov){
                this.numHandle(nv || 0)
            },
            deep:true
        }
    },
    created() {

    },
    mounted() {
        this.numHandle(0)
    },
    methods: {
        setNumberTransform () {
            let numberItems = this.$refs.numberItem
            for (let index = 0; index < numberItems.length; index++) {
                let elem = numberItems[index]
                elem.style.transform = `translate(-50%, -${this.numArr[index] * 10}%)`
            }
        },
        numHandle(num){
            num = num || 0
            let num2 = num+''
            if (num2.length < this.length) {
                num2 = '0' + num2
                this.numHandle(num2)
            }else if (num2.length == this.length){
                this.numArr = num2.split('')
                this.setNumberTransform()
            }
        },
        getRandomNumber (min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        }
    },
};
</script>

<style  lang="less" scoped>
.baseNumberSlow-main-box{
    display: flex;
    justify-content: space-around;
    .box-item {
        display: block;
        width: 48px;
        height: 60px;
        background: url(../../assets/img/hm.png) no-repeat center center;
        background-size: 100% 100%;
        font-size: 40px;
        line-height: 82px;
        text-align: center;
        position: relative;
        writing-mode: vertical-lr;
        text-orientation: upright;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    .box-item span {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        letter-spacing: 10px;
        transition: all 1s ease;
        color: #ddf0ff;
    }
}
</style>
